<template>
  <li class="todo-line">
    <div class="todo-item">
      <input style="width: 30px; height: 30px; margin-right: 10px;" type="checkbox" v-bind:checked="todoItem.done" @click="itemCheck(item)">
      <p class="item-label" v-bind:class="{ 'line-through': todoItem.done }">{{ index + 1 }} . {{ todoItem.text  }} </p>
      <p class="item-status" v-if="todoItem.done">完成</p>
      <p class="item-delete" @click="deleteClick">删除</p>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    todoItem: Object,
    index: Number
  },
  data () {
    return {}
  },
  methods: {
    itemCheck () {
      this.$store.commit('toggleTodo', this.index)
    },
    deleteClick () {
      this.$store.commit('deleteTodo', this.index)
    }
  }
}
</script>

<style scoped>
.todo-line {
  height: 30px;
  width: 100%;
  margin-top: 50px
}
.item-status {
  display: inline;
  background: red;
  color: white;
  padding: 0 5px;
  margin-left: 10px;
  font-size: 30px;
}
.item-delete {
  display: none;
  text-decoration: underline;
  font-size: 30px;
  color: gray;
  cursor: pointer;
  margin-left: 50px;
}
.item-label {
  display: inline;
  font-size: 40px;
}
.line-through {
  text-decoration: line-through;
}
.todo-item:hover .item-delete {
  display: inline;
}
</style>
